<template>
  <el-dialog
    title="拒绝申请"
    :visible.sync="dialogVisible"
    width="600px"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="学生姓名">
        <span>{{ currentApplication ? currentApplication.studentName : '' }}</span>
      </el-form-item>
      <el-form-item label="学号">
        <span>{{ currentApplication ? currentApplication.studentNo : '' }}</span>
      </el-form-item>
      <el-form-item label="题目名称">
        <span>{{ currentApplication ? currentApplication.topicTitle : '' }}</span>
      </el-form-item>
      <el-form-item label="拒绝理由" prop="reviewReason">
        <el-input
          v-model="form.reviewReason"
          type="textarea"
          :rows="6"
          placeholder="请填写拒绝理由，将会告知学生"
          maxlength="500"
          show-word-limit
        />
        <div style="color: #909399; font-size: 12px; margin-top: 5px;">
          <i class="el-icon-info"></i> 请客观、礼貌地说明拒绝原因，如技术栈不匹配、名额已满等
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="danger" @click="submitForm" :loading="submitting">确认拒绝</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { rejectStudent } from "@/api/system/application";

export default {
  name: "RejectDialog",
  data() {
    return {
      // 对话框
      dialogVisible: false,
      submitting: false,
      // 当前申请
      currentApplication: null,
      // 表单
      form: {
        reviewReason: ""
      },
      // 表单校验
      rules: {
        reviewReason: [
          { required: true, message: "请填写拒绝理由", trigger: "blur" },
          { min: 10, message: "拒绝理由至少10个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    /** 打开对话框 */
    open(application) {
      this.currentApplication = application;
      this.form = {
        reviewReason: ""
      };
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    /** 取消 */
    cancel() {
      this.dialogVisible = false;
      this.reset();
    },
    /** 重置 */
    reset() {
      this.form = {
        reviewReason: ""
      };
      this.currentApplication = null;
    },
    /** 提交 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$modal.confirm('是否确认拒绝该学生的申请？').then(() => {
            this.submitting = true;
            return rejectStudent(this.currentApplication.applicationId, this.form);
          }).then(() => {
            this.$modal.msgSuccess("操作成功");
            this.dialogVisible = false;
            this.$emit('success');
            this.submitting = false;
          }).catch(() => {
            this.submitting = false;
          });
        }
      });
    }
  }
};
</script>

<style scoped>
</style>